import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Swiper, SwiperItem, Image, Text } from "@tarojs/components-rn";
import { AtProgress } from 'taro-ui';
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import TabBar from "../../components/Tabbar";
import { getRuntime, partOf } from "../../utils/common";
import indexStyleSheet from "./index_styles";
import icon_67 from '../../assets/img/icon_67.png';
import icon_68 from '../../assets/img/icon_68.png';
import icon_69 from '../../assets/img/icon_69.png';
import icon_70 from '../../assets/img/icon_70.png';
import icon_71_on from '../../assets/img/icon_71_on.png';
var _styleSheet = indexStyleSheet;
let Index = class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      banners: [],
      publicWelfare: [],
      activity: [],
      allMoney: {}
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '公益' });
    this.getBanners();
    this.getPublicWelfare();
    this.getAllPublicWelfareMoney();
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  getBanners() {
    let { PublicWelfareStore } = this.props.stores;
    PublicWelfareStore.getBanners({
      callback: banners => {
        let resArr = toJS(banners);
        this.setState({
          banners: resArr.items
        });
      }
    });
  }
  // 公益、活动列表
  getPublicWelfare() {
    let { PublicWelfareStore } = this.props.stores;
    PublicWelfareStore.getPublicWelfare({
      callback: res => {
        let resArr = toJS(res);
        this.setState({
          publicWelfare: resArr.welfare,
          activity: resArr.activities
        });
        getRuntime().setStorage('welfare_activity');
      }
    });
  }
  /**
   * 获取百分比
   * @param x 分子(已募捐金额)
   * @param y 分母(需要募捐总数)
   */
  getPercentage(x, y = 1) {
    let res = (x / y).toFixed(2);
    if (res >= 1) res = 1;
    return res * 100;
  }
  handelRouterNeedLogin(url = '/pages/index/index') {
    if (!getRuntime().getToken()) {
      getRuntime().navigateTo('/pages/login/login');
      return;
    }
    getRuntime().navigateTo(url);
  }
  getAllPublicWelfareMoney() {
    let { PublicWelfareStore } = this.props.stores;
    PublicWelfareStore.getAllPublicWelfareMoney({
      callback: res => {
        this.setState({ allMoney: toJS(res) });
      }
    });
  }
  render() {
    let { banners, publicWelfare, activity, allMoney } = this.state;
    let accumulatedAmount = allMoney.accumulatedAmount ? (allMoney.accumulatedAmount / 1000).toFixed(2) + '万' : '暂无';
    let surplusAmount = allMoney.surplusAmount ? (allMoney.surplusAmount / 1000).toFixed(2) + '万' : '暂无';
    let usedAmount = allMoney.usedAmount ? (allMoney.usedAmount / 1000).toFixed(2) + '万' : '暂无';
    return <View style={_styleSheet["welfare-index"]}>
        {banners.length > 0 && <View style={_styleSheet["weifare-swiper"]}>
           <Swiper indicatorColor="#f7cad0" indicatorActiveColor="#fff" indicatorDots style={_styleSheet["swiper"]}>
             {banners.map(item => {
            return <SwiperItem onClick={this.handelRouter.bind(this, item.url)} style={_styleSheet["swiper-item"]}>
                     <Image src={item.picture} style={_styleSheet["swiper-img"]} />
                   </SwiperItem>;
          })}
           </Swiper>
        </View>}

        <View style={_styleSheet["welfare-nav"]}>
          <View style={_styleSheet["item"]}>
            <Image src={icon_67} style={_styleSheet["item-icon"]} />
            <View style={_styleSheet["info"]}>
              <View style={_styleSheet["welfare-title"]}>累计慈善金额累计慈善金额累计慈善金额累计慈善金额</View>
              <View style={_styleSheet["welfare-info"]}>{accumulatedAmount}</View>
            </View>
          </View>
          <View style={_styleSheet["item"]}>
            <Image src={icon_68} style={_styleSheet["item-icon"]} />
            <View style={_styleSheet["info"]}>
              <View style={_styleSheet["welfare-title"]}>剩余慈善金额</View>
              <View style={_styleSheet["welfare-info"]}>{surplusAmount}</View>
            </View>
          </View>
          <View style={_styleSheet["item"]}>
            <Image src={icon_69} style={_styleSheet["item-icon"]} />
            <View style={_styleSheet["info"]}>
              <View style={_styleSheet["welfare-title"]}>已使用慈善金额</View>
              <View style={_styleSheet["welfare-info"]}>
                {usedAmount}
             
              </View>
            </View>
          </View>
          <View onClick={this.handelRouterNeedLogin.bind(this, '/pages/public_welfare/welfare_apply')} style={_styleSheet["item"]}>
            <Image src={icon_70} style={_styleSheet["item-icon"]} />
            <View style={_styleSheet["info"]}>
              <View style={_styleSheet["welfare-title"]}>提交慈善申请</View>
              <View style={[_styleSheet["welfare-info"], _styleSheet["welfare-apply"]]}>申请资助</View>
            </View>
          </View>
        </View>
        <View style={_styleSheet["interval"]} />

        {publicWelfare.length > 0 && <View style={_styleSheet["column-wrap"]}>
           <View style={[_styleSheet["column-title"], _styleSheet["content-30"]]}>
             
              <View style={_styleSheet["column-name"]}>支持他(她)</View>
              <Text onClick={this.handelRouter.bind(this, '/pages/public_welfare/welfare')} style={_styleSheet["column-more"]}>更多 > </Text>
           </View>
        </View>}
        {publicWelfare.length > 0 && <View style={_styleSheet["list-15"]}>
            {publicWelfare.map(item => {
          return <View onClick={this.handelRouter.bind(this, '/pages/public_welfare/welfare_detail?id=' + item.id)} style={_styleSheet["list-15-item"]}>
                    <Image src={item.logoImg} style={_styleSheet["img"]} />
                    <View style={_styleSheet["info"]}>
                      <View style={[_styleSheet["line"], _styleSheet["line1"]]}>
                        <View style={_styleSheet["list-title"]}>{item.name}</View>
                        <View style={_styleSheet["progress"]}>
                          <AtProgress percent={this.getPercentage(item.sumMoney, item.amountOfApplication)} color={'#de5932'} isHidePercent={true} />
                        </View>
                        <Text style={_styleSheet["count"]}>{item.amountOfApplication}</Text>
                        <Text style={_styleSheet["percentage"]}>{this.getPercentage(item.sumMoney, item.amountOfApplication)}%</Text>
                      </View>
                      <View style={[_styleSheet["line"], _styleSheet["line2"]]}>
                        <Text style={_styleSheet["list-desc"]}>{partOf(item.introduce, 30)}</Text>
                        <Image src={icon_71_on} style={_styleSheet["btn-support"]} />
                      </View>
                    </View>
                  </View>;
        })}
          </View>}
        {publicWelfare.length <= 0 && <View style={_styleSheet["page-none-info"]}>暂无公益项目信息~</View>}

        <View style={_styleSheet["interval"]} />

        {activity.length > 0 && <View style={_styleSheet["column-wrap"]}>
           <View style={[_styleSheet["column-title"], _styleSheet["content-30"], _styleSheet["c2"], { 'border-left': '6px solid #feb851' }]}>
              <View style={_styleSheet["column-name"]}>慈善活动</View>
              <View onClick={this.handelRouter.bind(this, '/pages/public_welfare/activity')} style={_styleSheet["column-more"]}>更多
                 > </View>
           </View>
        </View>}

        {activity.length > 0 && <View style={_styleSheet["list-17"]}>
          {activity.map(item => {
          return <View onClick={this.handelRouter.bind(this, '/pages/public_welfare/activity_detail?id=' + item.id)} style={_styleSheet["list-17-item"]}>
                  <Image src={item.logoImg} style={_styleSheet["img"]} />
                  <View style={_styleSheet["info"]}>
                    <View style={_styleSheet["list-title"]}>{item.title}</View>
                    <View style={_styleSheet["list-desc"]}>{partOf(item.introduce, 45)}</View>
                  </View>
                </View>;
        })}
        </View>}
        <TabBar currentTab="publicWelfare" />
      </View>;
  }
};
Index = tslib_1.__decorate([inject("stores"), observer], Index);
export default Index;